<html xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" >  

    <ui:composition template="layout.xhtml">
        <ui:define name="corpo">
            <h:form id="buscar_form" acceptcharset="utf-8"> 
                  <div id="breadcrumb">
                    <p:commandLink  actionListener="#{managerIndex.redirect('index.xhtml')}" value="Inicio" update="@form" immediate="true"/> >
                    <p:commandLink  actionListener="#{managerIndex.redirect('indexProtocolo.xhtml')}" value="Protocolo" update="@form" immediate="true"/> > 
                    <p:commandLink  value="Relatório de Selos por Protocolo" update="@form" immediate="true"/>
                </div>
                <p:messages id="msg"/>
                <p:panel header="Relatório Selo Protocolo">
                    <h:panelGrid columns="2" styleClass="textAlignRight" 
                                 columnClasses="textAlignRight">
                        <h:outputLabel value="Data Inicial:"/>
                        <p:calendar  value="#{managerRelatorioSeloProtocolo.data}" mode="popup" 
                                     showOn="both" pattern="dd/MM/yyyy" required="true" requiredMessage="Filtro 'Data Inicial' é obrigatório"/>
                        <h:outputLabel value="Data Final:"/>
                        <p:calendar  value="#{managerRelatorioSeloProtocolo.dataFinal}" mode="popup" 
                                     showOn="both" pattern="dd/MM/yyyy" required="true" requiredMessage="Filtro 'Data Final' é obrigatório"/>
                        
                    </h:panelGrid>
                    <div class="buttonAction">
                        <p:commandButton value="Buscar" icon="ui-icon-search" 
                                         actionListener="#{managerRelatorioSeloProtocolo.pesquisar()}"
                                         update="@form" /> 
                          <p:commandButton icon="ui-icon-closethick" value="Limpar" 
                                           actionListener="#{managerRelatorioSeloProtocolo.clean()}" 
                                           update="@form" process="@this"
                                           immediate="true"/>
                     </div>
                    
                    <p:dataTable id="proTable" var="sp" value="#{managerRelatorioSeloProtocolo.servicoProtocolo}" 
                                         paginator="true" rows="5"
                                         paginatorPosition="bottom" emptyMessage="Nenhum registro encontrado"
                                         paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
                                         rowsPerPageTemplate="5,10,15">     
                                <f:facet name="header">  
                                    Protocolo
                                </f:facet>
                                  <p:column  style="width:20px;">  
                                    <f:facet name="header" >   
                                        Opções
                                    </f:facet>  
                                    <p:commandButton icon="ui-icon-search" title="Ver" label="Ver"
                                                     actionListener="#{managerVisualizarProtocolo.ver(sp.protocolo.id)}" 
                                                     update="@form"/>
                                </p:column>
                                <p:column  style="width:50px;">  
                                    <f:facet name="header" >   
                                        Nº Protocolo
                                    </f:facet>  
                                    <h:outputText value="#{sp.protocolo.id}"  />  
                                </p:column>
                                <p:column  style="width:200px;">  
                                    <f:facet name="header" >   
                                        Serviço
                                    </f:facet>  
                                    <h:outputText value="#{sp.atoItem.descricao}" />  
                                </p:column>
                                <p:column>  
                                    
                                    <f:facet name="header"   >   
                                        <table style="width: 417px;" >
                                            <tr>
                                                <td style="width: 80%;">
                                                    <h:outputText value="Descrição"/>  
                                                </td>
                                                <td style="width: 20%;">
                                                    <h:outputText value="Serie"/>  
                                                </td>
                                                <td style="width: 20%;">
                                                    <h:outputText value="Número"/>  
                                                </td>
                                                 <td style="text-align: center; width: 20%">
                                                       Cor
                                                </td>
                                            </tr>
                                    </table>
                                    </f:facet>  
                                    <table style="width:100%">
                                        <ui:repeat value="#{sp.selos}" var="sel">
                                            <tr>
                                                <td style="width: 56%;">
                                                    <h:outputText value="#{sel.tipoSelo.descricao}"/>  
                                                </td>
                                                <td style="width: 16%;">
                                                    <h:outputText value="#{sel.serie}"/>  
                                                </td>
                                                <td style="width: 11%;">
                                                    <h:outputText value="#{sel.numero}"/>  
                                                </td>
                                                 <td style="text-align: center;">
                                                        <p:commandLink id="selos" title="Número: #{sel.numero} - Serie: #{sel.serie}"  
                                                                       actionListener="#{managerConsultarProtocoloSelo.protocoloGetSelos(sel.id)}"
                                                                       oncomplete="seloDlg.show()"  >
                                                                <div style="width: 30px; height:30px; float:left; margin-left: 2px;
                                                                    background-color: \##{sel.tipoSelo.corSelo.cor};">
                                                                </div>
                                                        </p:commandLink>
                                                </td>
                                            </tr>
                                        </ui:repeat>
                                    </table>
                                </p:column>
                        
                               <p:column  style="width:100px;" headerText="Valor">    
                                    <h:outputText value="#{sp.valor}" >
                                        <f:convertNumber pattern="#,###,##0.00"/>
                                    </h:outputText>
                                </p:column>
                            </p:dataTable>
                    
                            <div class="buttonAction">
                                <p:commandButton value="Relatório" icon="ui-icon-print" 
                                                actionListener="#{managerRelatorioSeloProtocolo.gerarRelatorio()}" 
                                                update="@this" process="@this" immediate="true" ajax="false"
                                                onclick="this.form.target='_blank'"
                                                disabled="#{empty managerRelatorioSeloProtocolo.servicoProtocolo}"/> 
                                <p:commandButton icon="ui-icon-arrowreturnthick-1-w" value="Voltar" 
                                                 actionListener="#{managerIndex.redirect('indexProtocolo.xhtml')}" immediate="true"
                                                 update="@form"/>
                            </div>
                </p:panel>
            </h:form>
        </ui:define>
    </ui:composition>
</html>